<template>
    <div class="frist">
      <nav class="navbar">
        <div class="shouye" style="background-color: green;list-style: none;margin-left: 5em;">
          <router-link to="/" class="navbar-link">首页</router-link>
        </div>
  
  
        <div class="navbar-right">
          <a href="#" class="photo" @mouseover="showHover = true" @mouseout="checkHoverOut">
            <img src="https://codelover.club/icons/user/icon8.png" alt="用户头像" />
          </a>
  
          <div class="hover-box" v-show="showHover" @mouseover.stop="stopHoverOut" @mouseout="checkHoverOut">
            <div class="information">
              <img src="https://codelover.club/icons/user/icon8.png" alt="学生" />
              <div class="profile-info">
                <p class="id-number">22000901</p>
                <p class="center-text">个人中心</p>
              </div>
            </div>
            <div class="menu-items " style="width: 330px;">
              <p>我的课程</p>
              <p>学习广场</p>
              <p>管理中心</p>
            </div>
  
            <div class="empty-data" style="width: 330px;height: 200px; background-color: #f1f1f1;">
              <p>暂无数据</p>
            </div>
            <div class="landout" style="width: 330px; color:lightslategray ;font-style:normal;">
              <router-link to="/LoginForm" class="logout-link" style="margin-right: 30px; color: #cd4242">
                退出登录
              </router-link>
              <router-link to="/RegistrationForm" class="logout-rank" style="margin-right: 30px; color: #348e1b">
                快速注册
              </router-link>
            </div>
          </div>
  
        </div>
      </nav>
  
      <div class="homeSwiper" style="height: 33vh;">
        <div class="left-info" style="margin-top: -90px;">
          <div class="fTitle"><span style="margin-left: -30px; ">数字化成长空间</span>
            <div class="xcxImg" style="margin-top: 15px;">
              <img src="https://codelover.club/static/img/xcx.b213a034.jpg" style="height: 20vh;width: 20vh;" alt="二维码">
            </div>
          </div>
        </div>
  
        <div class="swiper-container">
          <div class="swiper-slide">
            <img :src="currentImage" :alt="'Image ' + currentImageIndex" style="height: 33vh;width: 50vh;">
          </div>
        </div>
      </div>
    </div>
  
  
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue';
  
  const images = [
    'https://tse1-mm.cn.bing.net/th/id/OIP-C.KG1GVMh6277GX0A44AadcQHaEK?w=279&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    'https://tse2-mm.cn.bing.net/th/id/OIP-C.MtCEzykUjBmdAyUdaxH2WgHaE8?w=251&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    'https://tse1-mm.cn.bing.net/th/id/OIP-C._i4SnOUV8DplNoiGIzdbwAHaEK?w=306&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    'https://tse4-mm.cn.bing.net/th/id/OIP-C.IUFwYoTY4I-RkbhPy12aKQHaEK?w=291&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7',
    // ... 更多图片  
  ];
  
  const currentImage = ref(images[0]);
  const currentImageIndex = ref(0);
  let intervalId;
  
  const switchImage = () => {
    currentImageIndex.value = (currentImageIndex.value + 1) % images.length;
    currentImage.value = images[currentImageIndex.value];
  };
  
  onMounted(() => {
    intervalId = setInterval(switchImage, 4000);
  });
  
  onUnmounted(() => {
    clearInterval(intervalId);
  });
  
  
  
  // 使用 ref 创建响应式数据  
  const showHover = ref(false)
  
  
  function stopHoverOut() {
    showHover.value = true
  }

  function checkHoverOut(event) {
    if (!event.relatedTarget?.matches('.photo, .hover-box *, .hover-box')) {
      showHover.value = false
    }
  }
  
  
  
  </script>
  
  
  <style scoped>
  .first {
    position: relative;
  }
  
  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6vh;
    background-color: #ffffff;
    color: #ffffff;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    gap: 8em;
    align-items: center;
    padding: 10px;
    box-shadow: 0 11px 15px rgba(0, 0, 0, 0.1);
  }
  
  .shouye {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    justify-content: space-between;
    /* margin-left: 100em; */
    padding: 0 4px;
  }
  
  
  .navbar-link {
    font-size: 1rem;
    color: white;
    padding: 10px;
  }
  
  .navbar-link-item {
    position: relative;
  }
  
  .photo {
    position: relative;
    /* 使得hover-box可以相对于这个元素定位 */
    display: inline-block;
    /* 确保可以正确触发mouseover和mouseout事件 */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* 假设是圆形头像 */
    overflow: hidden;
  }
  
  
  
  .navbar-right {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    margin-right: 5em;
    justify-content: space-between;
    /* position: relative; */
  }
  
  .phot-container {
    position: relative;
    margin-right: 25vw;
  }
  
  .photo img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }

  .hover-box {
    border: 1px solid #e7e7e7;
    display: block;
    position: absolute;
    bottom: -670%;
    left: 85%;
    transform: translateX(-60%);
    width: 6vw;
    height: 20vh;
    padding: 160px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 4px;
    transition: opacity 10s ease;
    pointer-events: auto;
    opacity: 1;
    max-width: 100px;
  }
  
  .photo:hover+.hover-box {
    opacity: 100;
    display: block;
  }
  
  .information {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: flex-start;
    transform: translateX(-150px);
    top: 23px;
  
  }
  
  .information img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 28px;
    margin-left: 15px;
  }
  
  .profile-info {
    margin: 15px;
    align-items: center;
  }
  
  .profile-info p {
    margin: 0;
    display: inline-block;
    text-align: center;
    font-weight: bold;
  }
  
  .profile-info .id-number {
    font-size: 26px;
  }
  
  .profile-info .center-text {
    font-size: 16px;
    margin-left: 5px;
  }
  
  
  
  .menu-items {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: -35px;
    margin-left: -130px;
  }
  
  .menu-items p {
    margin-top: 15px;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    margin-right: 15px;
  }
  
  .menu-items p:last-child {
    margin-right: 0;
  }
  
  .menu-items p:nth-child(1),
  .menu-items p:nth-child(2),
  .menu-items p:nth-child(3) {
    color: #ffffff;
    font-style: normal;
  }
  
  .empty-data {
    position: relative;
    margin-left: -130px;
    border-radius: 10px;
    padding-top: 30px;
    margin-top: 5px;
  }
  
  .empty-data p {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    color: black;
    padding: 10px;
    margin: 0;
    width: 100%;
    text-align: center;
  }
  
  .landout {
    font-size: 16px;
    margin-left: -50px;
  }
  
  
  
  .homeSwiper {
    height: auto;
    display: flex;
    /* 使用Flexbox布局 */
    justify-content: space-between;
    /* 让子元素并排显示并保持间距 */
    align-items: center;
    /* 如果需要垂直居中 */
    position: relative;
    overflow: visible;
    background: linear-gradient(to bottom, rgba(74, 184, 243, 0.916), rgb(252, 252, 252));
    margin: 12vh 45vh;
    border-radius: 15px;
    box-shadow: 0 11px 15px rgba(0, 0, 0, 0.1);
  }
  
  .homeSwiper .left-info {
    width: calc(70%  - 30px);
    /* 设置宽度为容器的一半减去间隔 */
    margin-right: 20px;
  }
  
  .homeSwiper .left-info .fTitle {
    margin-top: 10vh;
    justify-content: center;
    width: 400px;
    font-family: Segoe UI;
    font-size: 40px;
    color: #707070;
  }
  
  .homeSwiper .swiper-container {
    /* margin: 10vh;  */
    height: 100%;
    position: static;
    /* 由于是flex项目，不需要绝对定位 */
  }
  
  
  .xcxImg img {
    width: 100%;
    mix-blend-mode: multiply;
    display: block;
  }
  
  .left-info {
    margin-left: 10vw;
  }
  
  .swiper-container {
    width: 50%;
    height: 100%;
    margin-top: 0;
  }
  
  
  @media (max-width: 768px) {
    .navbar {
      height: 50px;
    }
  
    .shouye {
      font-size: 0.8rem;
      margin-left: 10px;
  
    }
  
    .photo-container {
      margin-right: 5px;
    }
  
  }
  </style>
  